<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Student</title>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script src="../src/js/lib/jquery.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .slide-menu {
            float: left;
            width: 240px;
            height: 100%;
        }

        .slide-menu ul {
            list-style: none;
        }

        .slide-menu ul li {
            line-height: 54px;
            height: 70px;
            color: #6B7280FF;
        }

        .menu-list a {
            color: #333;
            font-size: 24px;
            text-decoration: none;
        }

        .menu-list .icon {
            vertical-align: middle;
            padding-right: 15px;
        }

        .menu-list .logo {
            margin-bottom: 40px;
        }

        .menu-list .logo a {
            font-size: 30px;
        }

        .menu-list .bottom {
            position: absolute;
            bottom: 20px;
        }

        .logout-student {
            color: #333 !important;
            font-size: 24px;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="slide-menu">
    <ul class="menu-list">
        <li class="logo">
            <a href="#">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                <span class="text">个人头像</span>
            </a>
        </li>
        <li>
            <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                <span class="text">首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                <span class="text">个人主页</span>
            </a>
        </li>
        <li>
            <a href="./form.html">
                    <span class="icon">
                        <ion-icon name="hammer-outline"></ion-icon>
                    </span>
                <span class="text">修改信息</span>
            </a>
        </li>
        <li>
            <a href="./grade.html">
                    <span class="icon">
                        <ion-icon name="bar-chart-outline"></ion-icon>
                    </span>
                <span class="text">查询成绩</span>
            </a>
        </li>
        <li>
            <a href="./change_password.html">
                    <span class="icon">
                        <ion-icon name="settings-outline"></ion-icon>
                    </span>
                <span class="text">修改密码</span>
            </a>
        </li>
        <div class="bottom">
            <li id="logoutStudent" class="logout-student">
                <!-- <a href=""> -->
                <span class="icon">
                        <ion-icon name="log-out-outline"></ion-icon>
                    </span>
                <span class="text">登出</span>
                <!-- </a> -->
            </li>
        </div>

    </ul>
</div>
</body>
<script>
    $('#logoutStudent').click(() => {
        $.ajax("../api.php/logout", {
            type: "get",
            dataType: "json",
            success: function (res, status_code) {
                if (res["code"] == 200) {
                    location.href = '../login.html'
                }
            },
            error: function () {
                alert('登出失败，请重试');
            }
        });
    })
</script>

</html>